<template>
	<div class="main_content">
		<div class="top_seach">
			<div class="btns">
				<el-button  type="primary" icon="el-icon-plus" @click="handleAdd" style="margin-right: 10px;"></el-button>
				<el-input v-model="input" placeholder="请输入内容" style="margin-right: 10px;" prefix-icon="el-icon-search" clearable/>
				<el-button  type="primary" icon="el-icon-search" @click="handleSearch"></el-button>
			</div>
		</div>
		<div class="content_table">
			<el-table :data="MoresData" style="width: 100%" >
				<el-table-column
				      type="selection"
				      width="55">
				    </el-table-column>
				<el-table-column label="风俗文化名" prop="moresName" width="280">
				</el-table-column>
				<!-- <el-table-column label="所属地区" prop="district" width="260">
				</el-table-column>
				<el-table-column label="详细地址" prop="detailedAddress" width="200">
				</el-table-column> -->
				<el-table-column prop="moresIntroduce" width="100">
					<template slot-scope="scope">
						<el-button type="text" @click="showContent(scope.row.moresIntroduce)">显示内容</el-button>
					</template>
				</el-table-column>
				<el-table-column label="内容" prop="moresIntroduce" show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="操作" fixed="right" width="180">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="footer_page">
			<el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
				layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
		</div>
		<EditorMores ref="editorMores"></EditorMores>
		<AddMores ref="addMores"></AddMores>
		<el-dialog title="内容" :visible.sync="dialogFormVisible">
			<div class="w-e-text">
				<div v-html="moresIntroduce"></div>
			</div>
		</el-dialog>
	</div>

</template>

<script>
	import EditorMores from "../../components/backstage/EditorMores.vue"
	import AddMores from "../../components/backstage/AddMores.vue"
	import MoresApi from "@/api/mores.js"
	import moresclassApi from "@/api/moresclassify.js"
	export default {
		components: {
			EditorMores,
			AddMores
		},
		data() {
			return {
				total: 0,
				pageSize: 10, 
				currentPage: 1,
				input: "",
				MoresData: [],
				ClassiftData: [],
				options: [],
				dialogFormVisible:false,
				moresIntroduce:""
			}
		},
		methods: {
			showContent(row) {
				this.moresIntroduce = row;
				this.dialogFormVisible = true;
			},
			handleEdit(index, row) { //编辑点击事件
				console.log(index, row);
				this.$refs.editorMores.dialogFormVisible = true;
				this.$refs.editorMores.form = JSON.parse(JSON.stringify(row));
				this.$refs.editorMores.value = row.district.split(",");
				this.$refs.editorMores.options = this.options;
				this.$refs.editorMores.ClassiftData = this.ClassiftData;
				this.$refs.editorMores.createEditor();
			},
			handleAdd() {
				this.$refs.addMores.dialogFormVisible = true;
				this.$refs.addMores.options = this.options;
				this.$refs.addMores.ClassiftData = this.ClassiftData;
				this.$refs.addMores.createEditor();
			},
			handleDelete(index, row) { //删除点击事件
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteMores(row),
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			async deleteMores(row) {//删除
				const res = await MoresApi.deleteMores("/znMores/deleteMores/" + row.moresId);
				this.SearchMoresAll();
			},
			async handleSearch() { //搜索
				this.SearchMoresAll();
			},
			async SearchMoresAll() {//全部
				const res = await MoresApi.SearchMoresAll("/znMores/SearchMoresAll", {
					input: this.input,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.MoresData = res.data.records;
					this.total = res.data.total;
				}
			},
			async SearchClassifyAll() {
				const res = await moresclassApi.SearchClassifyAll("/znMoresClassification/SearchClassifyAll",{
					currentPage: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.ClassiftData = res.data.records;
					this.total = res.data.total;
				}
			},
			handleCurrentChange(page) {
				this.currentPage = page;
				this.SearchMoresAll();
			},
			async GetTree() {
				const res = await MoresApi.GetTree("/sysRegion/RegionTree");
				if (res.code == 200) {
					this.options = res.data;
				}
			},
		},
		created() {
			this.SearchMoresAll();
			this.SearchClassifyAll();
			this.GetTree();
		}
	}
</script>

<style lang="scss">
	.main_content {
		height: 100%;

		.top_seach {
			height: 7%;
			position: relative;
			.btns{
				display: flex;
				position: absolute;
				left: 38%;
				bottom: 0%;
			}
		}

		.content_table {
			height: 83%;

			.demo-table-expand {
				font-size: 0;

			}

			.demo-table-expand label {
				width: 90px;
				color: #99a9bf;
			}

			.demo-table-expand .el-form-item {
				margin-right: 0;
				margin-bottom: 0;
				width: 50%;
			}

			.ImgBox {
				margin: 0 20px 0 20px;
			}

			.InfoBox {
				
			}
		}

		.footer_page {
			height: 10%;
			position: relative;

			.el-pagination {
				position: absolute;
				right: 2%;
				bottom: 50%;
				transform: translateY(50%);

			}
		}

	}
</style>